<template>
	<div>
		<el-card shadow="hover" class="card_box">
			<el-row :gutter="15">
				<el-form ref="elForm" :model="formData" size="medium" label-width="100px" :rules="rules">
					<el-col :span="12">
						<el-form-item label="学院" prop="collegeid">
							<el-cascader v-model="formData.collegeid" :options="collegeidOptions"
								:props="collegeidProps" :style="{width: '100%'}" placeholder="请选择学院" clearable>
							</el-cascader>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="种类" prop="type">
							<el-cascader v-model="formData.type" :options="typeOptions" :props="typeProps"
								:style="{width: '100%'}" placeholder="请选择种类" clearable></el-cascader>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="规格" prop="size">
							<el-cascader v-model="formData.size" :options="sizeOptions" :props="sizeProps"
								:style="{width: '100%'}" placeholder="请选择规格" clearable></el-cascader>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="使用时间段" prop="time">
							<el-cascader v-model="formData.time" :options="timeOptions" :props="timeProps"
								:style="{width: '100%'}" placeholder="请选择使用时间段" clearable></el-cascader>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="使用日期" prop="date1">
							<el-cascader v-model="formData.date1" :options="dateOptions1" :props="dateProps1"
								:style="{width: '100%'}" placeholder="请选择使用日期" clearable></el-cascader>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item size="large">
							<el-button type="primary" @click="submitForm()">提交</el-button>
							<el-button @click="resetForm()">重置</el-button>
						</el-form-item>
					</el-col>
				</el-form>
			</el-row>
			<!--表格-->
			<el-table :data="query_table" stripe border style="width: 100%;height: 100%">
				<el-table-column prop="college" label="学院" width="180">
				</el-table-column>
				<el-table-column prop="code" label="编号" width="180">
				</el-table-column>
				<el-table-column prop="type" label="类型">
				</el-table-column>
				<el-table-column prop="size" label="规格">
				</el-table-column>


				<el-table-column fixed="right" label="操作" width="100">
					<template slot-scope="scope">
						<el-button @click="handleClick(scope.row)" type="text" size="small">申请</el-button>
					</template>
				</el-table-column>

				<el-dialog title="申请教室" :visible.sync="dialogFormVisible" :append-to-body="true">
					<el-form :model="form">
						<el-form-item label="教室编号" :label-width="formLabelWidth">
							<el-input v-model="form.code" autocomplete="off" :disabled="true"></el-input>
						</el-form-item>
						<el-form-item label="教室种类" :label-width="formLabelWidth">
							<el-input v-model="form.type" autocomplete="off" :disabled="true"></el-input>
						</el-form-item>
						<el-form-item label="教室规格" :label-width="formLabelWidth">
							<el-input v-model="form.size" autocomplete="off" :disabled="true"></el-input>
						</el-form-item>
						<el-form-item label="申请日期" :label-width="formLabelWidth">
							<el-input v-model="form.date" autocomplete="off" :disabled="true"></el-input>
						</el-form-item>
						<el-form-item label="使用时间" :label-width="formLabelWidth">
							<el-cascader v-model="form.usedate" :options="dateOptions" :props="dateProps"
								:style="{width: '100%'}" placeholder="时间段" clearable></el-cascader>
						</el-form-item>
						<el-form-item label="申请原因" :label-width="formLabelWidth">
							<el-input v-model="form.reason" autocomplete="off" type="textarea"></el-input>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="dialogFormVisible = false">取 消</el-button>
						<el-button type="primary" @click="ask()">确 定</el-button>
					</div>
				</el-dialog>
			</el-table>

			<!--分页-->
			<el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="size"
				layout="total, prev, pager, next" :total="total">
			</el-pagination>

		</el-card>
	</div>
</template>

<script>
	import {
		getAllCollege,
		getClassroom,
		getUserInfo,
		askClassroom
	} from '../../../api/system.js'
	export default {

		props: [],
		data() {
			return {
				dialogFormVisible: false,
				form: {
					cid: undefined,
					uid: undefined,
					identity: undefined,
					code: '',
					type: '',
					size: '',
					reason: '',
					email: '',
					time1: undefined,
					time2: undefined,
					time3: undefined,
					time4: undefined,
					time5: undefined,
					time6: undefined,
					usedate: [],
					date: [],
				},
				rules: {

					date1: [{
						required: true,
						message: '请输入使用日期',
						trigger: 'blur',
					}],

				},
				formLabelWidth: '120px',
				total: 0,
				size: 5,
				currentPage: 1,
				formData: {
					collegeid: [],
					type: [],
					size: [],
					time: [],
					date1: [],
					date3:undefined,
				},
				query_table: [

				],
				collegeidOptions: [],
				dateOptions: [],
				typeOptions: [{
						name: '多媒体教室',
						id: '多媒体教室'
					},
					{
						name: '普通教室',
						id: '普通教室'
					}
				],
				timeOptions: [{
						name: '7：50-9：30',
						id: '0'
					},
					{
						name: '9：40-11：20',
						id: '1'
					},
					{
						name: '13：30-15：10',
						id: '2'
					},
					{
						name: '15：20-17：00',
						id: '3'
					},
					{
						name: '18：00-19：40',
						id: '4'
					},
					{
						name: '19：50-21：30',
						id: '5'
					},
				],
				dateOptions1: [{
						name: '',
						id: '1'
					},
					{
						name: '',
						id: '2'
					},
					{
						name: '',
						id: '3'
					}
				],
				sizeOptions: [{
						name: '小型（20人）',
						id: '小型（20人）'
					},
					{
						name: '中型（50人）',
						id: '中型（50人）'
					},
					{
						name: '大型（120人）',
						id: '大型（120人）'
					},
				],
				collegeidProps: {
					"multiple": false,
					"label": "name",
					"value": "id",
					"children": "children"
				},
				dateProps: {
					"multiple": true,
					"label": "name",
					"value": "id",
					"children": "children"
				},
				dateProps1: {
					"label": "name",
					"value": "id",
					"children": "children"
				},
				typeProps: {
					"multiple": false,
					"label": "name",
					"value": "id",
					"children": "children"
				},
				sizeProps: {
					"multiple": false,
					"label": "name",
					"value": "id",
					"children": "children"
				},
				timeProps: {
					"multiple": true,
					"label": "name",
					"value": "id",
					"children": "children"
				},
				user: {
					uid: undefined,
					collegeid: '',
					categoryid: '',
					classid: '',
					code: '',
					name: '',
					email: '',
					sex: '',
					identity: undefined
				},
				askForm: {
					uid: undefined,
					identity: undefined,
					cid: undefined,
					reason: '',
					email: '',
					time1: undefined,
					time2: undefined,
					time3: undefined,
					time4: undefined,
					time5: undefined,
					time6: undefined,
					date: undefined,
				}
			}
		},

		methods: {
			submitForm() {
				this.$refs['elForm'].validate(valid => {
					if (!valid) return
					// TODO 提交表单
					this.queryClassroomByPage(this.currentPage);
				})
			},
			queryClassroomByPage(val) {
				var arr = [false, false, false, false, false, false];
				this.formData.collegeid[0] = this.formData.collegeid[0] == undefined ? 0 : this.formData.collegeid[0];
				for (let i = 0; i < this.formData.time.length; i++) {
					arr[this.formData.time[i]] = true;
				}
				var time1 = arr[0];
				var time2 = arr[1];
				var time3 = arr[2];
				var time4 = arr[3];
				var time5 = arr[4];
				var time6 = arr[5];
				let dd = new Date();
				var date2 = (dd.getMonth() + 1) + '月' + (dd.getDate() + 1) + '日';
				if (this.formData.date1[0] == '1') {
					date2 = (dd.getMonth() + 1) + '月' + (dd.getDate() + 1) + '日';
				} else if (this.formData.date1[0] == '2') {
					date2 = (dd.getMonth() + 1) + '月' + (dd.getDate() + 2) + '日';
				} else if (this.formData.date1[0] == '3') {
					date2 = (dd.getMonth() + 1) + '月' + (dd.getDate() + 3) + '日';
				}
				this.form.date = date2;
				getClassroom(this.formData.collegeid[0], this.formData.type[0], this.formData.size[0], time1,
						time2, time3, time4, time5, time6, date2,
						val, this.size)
					.then(
						res => {
							if (res.isok) {
								this.query_table = res.data1;
								this.total = res.data2;
							}
						}
					);
			},
			resetForm() {
				this.$refs['elForm'].resetFields();
			},
			getCollegeidOptions() {
				getAllCollege().then(res => {
					if (res.isok = true) {
						this.collegeidOptions = res.data1;
					}
				});
			},
			handleClick(row) {
				if (this.user.email != null) {
					this.form.cid = row.id;
					this.askForm.cid = row.id;
					this.form.code = row.code;
					this.form.type = row.type;
					this.form.size = row.size;
					var arr = [];
					for (let i = 0; i < this.formData.time.length; i++) {
						arr.push(this.timeOptions[this.formData.time[i]]);
					}
					if (arr.length == 0) {
						this.dateOptions = this.timeOptions;
					} else {
						this.dateOptions = arr;
					}
					this.dialogFormVisible = true;
				} else {
					this.$message("邮箱还没有验证哦！");
				}

			},
			handleCurrentChange(val) {
				this.queryClassroomByPage(val);
			},
			ask() {
				var arr = [false, false, false, false, false, false];
				this.dialogFormVisible = false;
				this.askForm.reason = this.form.reason;
				this.askForm.usedate = this.form.usedate;
				this.askForm.date = this.form.date;
				for (let i = 0; i < this.form.usedate.length; i++) {
					arr[this.form.usedate[i]] = true;
				}
				this.askForm.time1 = arr[0];
				this.askForm.time2 = arr[1];
				this.askForm.time3 = arr[2];
				this.askForm.time4 = arr[3];
				this.askForm.time5 = arr[4];
				this.askForm.time6 = arr[5];

				if (this.askForm.reason != '' && this.askForm.usedate.length != 0 && this.askForm.date != undefined) {
					askClassroom(this.askForm).then(res => {
						if (res.isok) {
							this.$message('申请成功，请耐心等待管理员批复哦！');
						}
					});
				} else {
					this.$message('使用时间段和申请原因都是必填的哦！');
				}

			},
			getUser() {
				getUserInfo().then(res => {
					if (res.isok) {
						this.user.uid = res.data1.id;
						this.askForm.uid = res.data1.id;
						this.user.collegeid = res.data1.collegeid;
						this.user.categoryid = res.data1.categoryid;
						this.user.classid = res.data1.classid;
						this.user.code = res.data1.code;
						this.user.name = res.data1.name;
						this.user.email = res.data1.email;
						this.askForm.email = res.data1.email;
						this.user.sex = res.data1.sex;
						this.user.identity = res.data1.identity;
						this.askForm.identity = res.data1.identity;
					}
				})
			},
			computeDate() {
				let d = new Date();
				this.dateOptions1[0].name = (d.getMonth() + 1) + '月' + (d.getDate() + 1) + '日';
				this.dateOptions1[1].name = (d.getMonth() + 1) + '月' + (d.getDate() + 2) + '日';
				this.dateOptions1[2].name = (d.getMonth() + 1) + '月' + (d.getDate() + 3) + '日';
			}

		},
		created() {
			this.getCollegeidOptions();
			this.queryClassroomByPage(this.currentPage);
			this.getUser();
			this.computeDate();
		},
	}
</script>

<style>
</style>
